<template>
    <!--重点产品现状分析功能  棉花-->
    <div class="product-cotton">

        <div class="secondary-menu">
            <div class="nav-list">
                <div class="nav-list-ul" ref="menuSelect">
                    <div @click="menuChange(item, index)" class="nav-list-item" v-for="(item, index) in navList" :key="index" :class="item.isActive ? 'active' : ''">
                        <img class="active-icon" v-if="item.isActive" :src="item.activeImg" />
                        <img class="normal-icon" v-else :src="item.img" />
                        <p class="label-ch">{{item.title}}</p>
                    </div>
                </div>
            </div>
            <div class="return">
                <p @click="back">返回</p>
            </div>
        </div>
        <div v-if="activeTitle==='棉花现状分析'">
            <el-row :gutter="20">
                <el-col span="7">
                    <chart-block chartID="chart1" :title="barOptionData.title" :optionData="barOptionData" chartType="getBar" height="37vh"></chart-block>
                    <chart-block chartID="chart2" :title="BarAndLineOptionData.title" :optionData="BarAndLineOptionData" chartType="getBarAndLine" height="37vh" style="margin-top:3vh"></chart-block>
                </el-col>
                <el-col span="10">
                    <p class="describe">
                        {{maxAreaName}}棉花的总产量最高，播种面积各团场排名{{maxAreaNameRank}}；
                        {{minAreaName}}的棉花总产量最低，播种面积各团场排名{{minAreaNameRank}}
                    </p>
                    <bashi-map :map-data="mapData" style="height:65vh"></bashi-map>
                </el-col>
                <el-col span="7">
                    <chart-block chartID="chart3" :title="barRadiusBlock.title" :optionData="barRadiusBlock" chartType="getBarRadiusSerialBlock" height="77vh" v-if="barRadiusBlockShow" @sortOutput="sortOutput" @sortArea="sortArea"></chart-block>
                </el-col>
            </el-row>
        </div>
        <div v-if="activeTitle==='棉花预测分析'">
            <el-row :gutter="20">
                <el-col span="7">
                    <chart-block chartID="chart4" :title="forecastBarOptionData.title" :optionData="forecastBarOptionData" chartType="getBar" height="37vh"></chart-block>
                    <chart-block chartID="chart5" :title="forecastBarAndLineOptionData.title" :optionData="forecastBarAndLineOptionData" chartType="getBarAndLine" height="37vh" style="margin-top:3vh"></chart-block>
                </el-col>
                <el-col span="10">
                    <p class="describe">
                        {{forecastmaxAreaName}}棉花的总产量最高，播种面积各团场排名{{forecastmaxAreaNameRank}}；
                        {{forecastminAreaName}}的棉花总产量最低，播种面积各团场排名{{forecastminAreaNameRank}}
                    </p>
                    <bashi-map :map-data="mapData2" style="height:65vh"></bashi-map>
                </el-col>
                <el-col span="7">
                    <chart-block chartID="chart6" :title="forecastBarRadiusBlock.title" :optionData="forecastBarRadiusBlock" chartType="getBarRadiusSerialBlock" height="77vh" @sortOutput="sortOutput" @sortArea="sortArea"></chart-block>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { getCommonData10, getAreaRank } from '@/api/pages.js'
export default {
    name: "product-cotton",
    components: {
        ChartBlock: () => import('@/components/chart-block'),
        BashiMap: () => import('@/components/map/bashi-map')
    },
    props: {},
    data() {
        return {
            navList: [
                {
                    img: require("../../assets/images/cotton_status.png"),
                    activeImg: require('../../assets/images/cotton_status_active.png'),
                    isActive: true,
                    title: "棉花现状分析"
                },
                {
                    img: require("../../assets/images/cotton_foretell.png"),
                    activeImg: require('../../assets/images/cotton_foretell_active.png'),
                    isActive: false,
                    title: "棉花预测分析"
                },
            ],
            activeTitle: "棉花现状分析",
            barOptionData: {
                title: '',
                categoryAxis: [], //类目轴数据
                seriesData: [
                    {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    },
                ],
                gridTop: "16%",
                LinearGradientColor: [//柱状渐变颜色
                    {
                        topColor: '#ffce22',
                        bottomColor: '#ff6c00'
                    },
                    {
                        topColor: '#86ffec',
                        bottomColor: '#01d478'
                    },
                ]
            },
            barOptionDataShow: false,
            BarAndLineOptionData: {
                title: '',
                categoryAxis: [], //类目轴数据
                seriesData: [
                    {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    }, {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    },
                ],

                LinearGradientColor: [//柱状图渐变色
                    {
                        topColor: '#00eac6',
                        bottomColor: '#00a38a'
                    },
                ],
                LineCircleColor: "#ffa800",//折线图颜色
                LineCircleBorderColor: "#ffa800",//折线图描边颜色
            },
            BarAndLineOptionDataShow: false,
            mapData: {
                mapData: [],
                effectData: [],
                scatterData: [],
	            tooltip: ['播种面积：','总产量：'],
	            ifCottonMap: true
            },
            barRadiusBlock: {
                title: "2019年各团场棉花情况",
                seriesData: [
                    {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    },
                ],
                seriesDataLabel: [],
                total: "",
                bzmjUnit: "",
                unit:"",
                left: 100,
                colorList: ['#fb6f5b', '#5ccef9'],
                BarGradientColor: {
                    topColor: '#5a42ec',
                    bottomColor: '#09bbfe'
                },
                symbolSize: ['100%', '100%'],
                Percent: true,//右侧文字是否显示百分比
                backgroundSorColor: [
                    {
                        leftColor: "rgba(62,47,78,0.5)",
                        rightColor: "rgba(62,47,78,0)"
                    },
                    {
                        leftColor: "rgba(5,64,114,0.5)",
                        rightColor: "rgba(5,64,114,0)"
                    }
                ],
                sort: true,
                symbol: "image://",
            },
            barRadiusBlockShow: false,

            forecastBarOptionData: {
                title: '',
                categoryAxis: [], //类目轴数据
                seriesData: [
                    {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    },
                ],
                gridTop: "16%",
                LinearGradientColor: [//柱状渐变颜色
                    {
                        topColor: '#ffce22',
                        bottomColor: '#ff6c00'
                    },
                    {
                        topColor: '#86ffec',
                        bottomColor: '#01d478'
                    },
                ]
            },
            forecastBarOptionDataShow: false,
            forecastBarAndLineOptionData: {
                title: '',
                categoryAxis: [], //类目轴数据
                seriesData: [
                    {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    }, {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    },
                ],

                LinearGradientColor: [//柱状图渐变色
                    {
                        topColor: '#00eac6',
                        bottomColor: '#00a38a'
                    },
                ],
                LineCircleColor: "#ffa800",//折线图颜色
                LineCircleBorderColor: "#ffa800",//折线图描边颜色
            },
            forecastBarAndLineOptionDataShow: false,
            forecastBarRadiusBlock: {
                title: "2019年各团场棉花情况",
                seriesData: [
                    {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    },
                ],
                seriesDataLabel: [],
                total: "",
                bzmjUnit: "",
                unit: "",
                left: 100,
                colorList: ['#fb6f5b', '#5ccef9'],
                BarGradientColor: {
                    topColor: '#5a42ec',
                    bottomColor: '#09bbfe'
                },
                symbolSize: ['100%', '100%'],
                Percent: true,//右侧文字是否显示百分比
                backgroundSorColor: [
                    {
                        leftColor: "rgba(62,47,78,0.5)",
                        rightColor: "rgba(62,47,78,0)"
                    },
                    {
                        leftColor: "rgba(5,64,114,0.5)",
                        rightColor: "rgba(5,64,114,0)"
                    }
                ],
                sort: true,
                symbol: "image://",
            },
            forecastBarRadiusBlockShow: false,
            maxAreaName: "",
            minAreaName: "",
            maxAreaNameRank: "",
            minAreaNameRank: "",
            mapData2: {
                mapData: [],
                effectData: [],
                scatterData: [],
	            tooltip:'总产量：'
            },
            forecastmaxAreaName: "",
            forecastminAreaName: "",
            forecastmaxAreaNameRank: "",
            forecastminAreaNameRank: "",
        }
    },
    computed: {},
    created() {

    },
    mounted() {
        this.getMapData()
        this.cottonOutput()
        this.cottonArea()
        this.cottonStatus()
        this.cottonStatusText()
        this.cottonStatusTitle()


    },
    methods: {
        menuChange(t, i) {
            this.activeTitle = t.title
            this.navList.map((item, index) => {
                if (index === i) {
                    item.isActive = true;
                    this.$store.commit("SET_BREAD2", '棉花预测分析');
                    this.getForecastMapData()
                    this.forecastCottonOutput()
                    this.forecastCottonStatus()
                    this.forecastCottonArea()
                    this.forecastCottonArea()
                    this.forecastCottonStatusTitle()
                    this.forecastcottonStatusText()
                } else {
                    item.isActive = false;
                    this.$store.commit("SET_BREAD2", '棉花现状分析');
                }
            });
        },
        //地图展示（最近一年各个区域的生产总值）
        getMapData() {
            getCommonData10({ busiCode: 'C053' }).then(res => {
                if (res.data.code === 200) {
                    res.data.data.list.map((item, index) => {
	                    // let symbolSize = Number(item.mhzcl) / 2000 > 30 ? 30 : Number(item.mhzcl) / 2000
                        // let symbolSize = 18
                        this.mapData.mapData.push({
                            name: item.areaName,
                            value: [item.mhbzmj,item.mhzcl,item.size],
	                        unit: [item.mjUnit,item.zclUnit]
                        })
                        this.mapData.scatterData.push({
                            name: item.areaName,
                            value: [item.longtitude, item.latitude, item.mhbzmj,item.mhzcl,item.size],
	                        unit: [item.mjUnit,item.zclUnit]
                        })
                    })
                }
            }).catch(err => { })
        },
        //棉花产量和产值变化-棉花现状分析
        cottonOutput() {
            getCommonData10({ busiCode: 'E109' }).then(res => {
                if (res.data.code === 200) {
                    this.barOptionData.title = res.data.data.title
                    this.barOptionData.categoryAxis = res.data.data.categoryAxis
                    this.barOptionData.seriesData = res.data.data.seriesData
                    this.barOptionDataShow = true
                }
            }).catch(err => { })
        },
        //棉花播种面积变化-棉花现状分析
        cottonArea() {
            getCommonData10({ busiCode: 'E110' }).then(res => {
                if (res.data.code === 200) {
                    this.BarAndLineOptionData.title = res.data.data.title
                    this.BarAndLineOptionData.categoryAxis = res.data.data.categoryAxis
                    this.BarAndLineOptionData.seriesData = res.data.data.seriesData
                    this.BarAndLineOptionDataShow = true
                }
            }).catch(err => { })
        },
        //各团场棉花情况-棉花现状分析
        cottonStatusTitle() {
            getCommonData10({ busiCode: 'C056' }).then(res => {
                if (res.data.code === 200) {
                    this.barRadiusBlock.title = res.data.data.list[0].title
                }
            }).catch(err => { })
        },
        cottonStatus(data) {
            getCommonData10({ busiCode: data || 'C051' }).then(res => {
                if (res.data.code === 200) {
                    this.barRadiusBlock.seriesData = []
                    this.barRadiusBlock.seriesDataLabel = []
                    // this.barRadiusBlock.bzmjUnit = res.data.data.list[0].bzmjUnit
                    res.data.data.list.forEach((item, index) => {
                        this.barRadiusBlock.seriesData.push({
                            name: item.areaName,
                            value: item.mhzcl,
                        })
                        this.barRadiusBlock.seriesDataLabel.push(item.mhbzmj)
                    })
                    this.barRadiusBlock.seriesData.forEach((item, index) => {
                        if (index > 4) {
                            item.symbol = "image://"
                        }
                    })
                    let max = Math.max(...this.barRadiusBlock.seriesData.map(x => x.value));
                    this.barRadiusBlock.total = parseInt(max) +15000
                    this.barRadiusBlock.unit =res.data.data.list[0].zclUnit
                    this.barRadiusBlockShow = true
                }
            }).catch(err => { })
        },
        //棉花现状-文字概述
        cottonStatusText() {
            getCommonData10({ busiCode: 'C052' }).then(res => {
                if (res.data.code === 200) {
                    res.data.data.list.forEach((item, index) => {
                        this.maxAreaName = item.maxAreaName
                        this.minAreaName = item.minAreaName
                    })
                    getAreaRank({ areaName: this.maxAreaName }).then(res => {
                        if (res.data.code === 200) {
                            this.maxAreaNameRank = res.data.data
                        }
                    }).catch(err => { })
                    getAreaRank({ areaName: this.minAreaName }).then(res => {
                        if (res.data.code === 200) {
                            this.minAreaNameRank = res.data.data
                        }
                    }).catch(err => { })
                }
            }).catch(err => { })
        },
        //返回
        back() {
            this.$router.go(-1)
        },
        //排序
        sortOutput(data) { //产量
            if (data === "outputUp") {
                this.cottonStatus("C057")
                this.forecastCottonStatus("C062")
            } else if (data === "outputDown") {
                this.cottonStatus("C058")
                this.forecastCottonStatus("C063")
            }
        },
        sortArea(data) {  //播种面积
            if (data === "areaUp") {
                this.cottonStatus("C059")
                this.forecastCottonStatus("C064")
            } else if (data === "areaDown") {
                this.cottonStatus("C060")
                this.forecastCottonStatus("C065")
            }
        },
        //预测地图展示（最近一年各个区域的生产总值）
        getForecastMapData() {
            getCommonData10({ busiCode: 'C067' }).then(res => {
                if (res.data.code === 200) {
                    res.data.data.list.map((item, index) => {
	                    let symbolSize = Number(item.mhzcl) / 100 > 30 ? 30 : Number(item.mhzcl) / 100
                        this.mapData2.mapData.push({
                            name: item.areaName,
                            value: item.mhzcl,
	                        unit: item.zclUnit
                        })
                        this.mapData2.scatterData.push({
                            name: item.areaName,
                            value: [item.longtitude, item.latitude, item.mhzcl, symbolSize],
	                        unit: item.zclUnit
                        })
                    })
                }
            }).catch(err => { })
        },
        //预测棉花产量和产值变化-棉花现状分析
        forecastCottonOutput() {
            getCommonData10({ busiCode: 'E117' }).then(res => {
                if (res.data.code === 200) {
                    this.forecastBarOptionData.title = res.data.data.title
                    this.forecastBarOptionData.categoryAxis = res.data.data.categoryAxis
                    this.forecastBarOptionData.seriesData = res.data.data.seriesData
                    this.forecastBarOptionDataShow = true
                }
            }).catch(err => { })
        },
        //预测棉花播种面积变化-棉花现状分析
        forecastCottonArea() {
            getCommonData10({ busiCode: 'E118' }).then(res => {
                if (res.data.code === 200) {
                    this.forecastBarAndLineOptionData.title = res.data.data.title
                    this.forecastBarAndLineOptionData.categoryAxis = res.data.data.categoryAxis
                    this.forecastBarAndLineOptionData.seriesData = res.data.data.seriesData
                    this.forecastBarAndLineOptionDataShow = true
                }
            }).catch(err => { })
        },
        //预测各团场棉花情况-棉花现状分析
        forecastCottonStatusTitle() {
            getCommonData10({ busiCode: 'C061' }).then(res => {
                if (res.data.code === 200) {
                    this.forecastBarRadiusBlock.title = res.data.data.list[0].title
                }
            }).catch(err => { })
        },
        forecastCottonStatus(data) {
            getCommonData10({ busiCode: data || 'C055' }).then(res => {
                if (res.data.code === 200) {
                    this.forecastBarRadiusBlock.seriesData = []
                    this.forecastBarRadiusBlock.seriesDataLabel = []
                    // this.forecastBarRadiusBlock.bzmjUnit = res.data.data.list[0].bzmjUnit
                    res.data.data.list.forEach((item, index) => {
                        this.forecastBarRadiusBlock.seriesData.push({
                            name: item.areaName,
                            value: item.zcl,
                        })
                        this.forecastBarRadiusBlock.seriesDataLabel.push(item.bzmj)
                    })
                    this.forecastBarRadiusBlock.seriesData.forEach((item, index) => {
                        if (index > 4) {
                            item.symbol = "image://"
                        }
                    })
                    let max2 = Math.max(...this.forecastBarRadiusBlock.seriesData.map(x => x.value));
                    this.forecastBarRadiusBlock.total = parseInt(max2) + 500
                    this.forecastBarRadiusBlock.unit =res.data.data.list[0].zclUnit
                    this.forecastBarRadiusBlockShow = true
                }
            }).catch(err => { })
        },
        //预测棉花现状-文字概述
        forecastcottonStatusText() {
            getCommonData10({ busiCode: 'C066' }).then(res => {
                if (res.data.code === 200) {
                    res.data.data.list.forEach((item, index) => {
                        this.forecastmaxAreaName = item.maxAreaName
                        this.forecastminAreaName = item.minAreaName
                    })
                    getAreaRank({ areaName: this.forecastmaxAreaName }).then(res => {
                        if (res.data.code === 200) {
                            this.forecastmaxAreaNameRank = res.data.data
                        }
                    }).catch(err => { })
                    getAreaRank({ areaName: this.forecastminAreaName }).then(res => {
                        if (res.data.code === 200) {
                            this.forecastminAreaNameRank = res.data.data
                        }
                    }).catch(err => { })
                }
            }).catch(err => { })
        },
    },
    watch: {}
}
</script>

<style scoped lang="scss">
.product-cotton {
    width: 100%;
    height: 100%;
    padding: 1vh 2.86vw 4.63vh;
    .secondary-menu {
        height: 5.5vw;
        line-height: 5.5vw;

        .nav-list {
            width: 100%;
            text-align: center;
            color: #5dbcff;
            left: 0;
            .nav-list-ul {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .nav-list-item {
                text-align: center;
                cursor: pointer;
                margin-top: 1vh;
                display: flex;
                justify-content: center;
                align-items: center;
                padding-right: 2.5vw;
                img {
                    display: block;
                    width: 5.5vw;
                    height: auto;
                    margin: 0 auto;
                }
                .active-icon {
                }
                .label-ch {
                    font-size: 1vw;
                    font-family: "Microsoft YaHei";
                    margin-top: -2vh;
                }
                &.active p {
                    color: #b5e5fd;
                }
            }
        }
    }
    .return {
        color: #03d3ff;
        display: flex;
        justify-content: flex-end;
        margin-top: -8vh;
        p {
            background: url("../../assets/images/return.png") top center
                no-repeat;
            background-size: 100% 100%;
            height: 3.7vh;
            line-height: 3.7vh;
            text-align: right;
            padding-right: 1.3vh;
            width: 4.6vw;
            cursor: pointer;
            font-size: 0.8vw;
        }
    }
    .describe {
        padding: 0 3vw;
        color: #d7fbff;
        text-align: left;
        font-size: 1.15vw;
        letter-spacing: 0.1vw;
        text-shadow: 0.2vw 0vw 0.3vw rgba(0, 155, 256, 0.5),
            -0.2vw 0vw 0.3vw rgba(0, 155, 256, 0.5),
            0vw 0.2vw 0.3vw rgba(0, 155, 256, 0.5),
            0vw -0.2vw 0.3vw rgba(0, 155, 256, 0.5);
    }
}
</style>
